<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:head>
        <link rel="stylesheet" type="text/css" href="/AnimeList/resources/css/templateStyle.css"/>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Anime DB</title>
    </h:head>

    <h:body>
        <p:growl id="growl"/>
        <p:messages id="mess"/>
        <p:layout fullPage="true">
            <p:layoutUnit position="north" size="200">
                <div class="topform"/>
            </p:layoutUnit>
            
            <p:layoutUnit position="west" size="400">
                <h:form  enctype="multipart/form-data" id="leftForm" styleClass="leftform">
                    <h:outputText value="#{msg.top10label}"/>
                    <br/><br/>
                    <ui:repeat value="#{reqBean.animeOrdByPop}" var="ordAnime">
                        <p:commandLink value="#{ordAnime.name} [#{ordAnime.typeInfo}]" styleClass="ordLink" update=":form" actionListener="#{mBean.animeSelect()}"
                                       >
                            <f:param name="animeId" value="#{ordAnime.id}"/>
                        </p:commandLink>
                        <br/>
                    </ui:repeat>
                    <br/>
        
                    <h:outputText value="#{msg.usersListLabel}"/><br/>
                    <ui:repeat value="#{reqBean.nickList}" var="users">
                        <h:outputText value="*#{users}  " styleClass="feed whitetext" />
                    </ui:repeat>
        
                    <p:ajaxStatus>
                        <f:facet name="start">
                            <p:graphicImage value="/src/40308.gif" style="width: 350px;"/>
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="Nya!"/>
                        </f:facet>
                    </p:ajaxStatus>
                </h:form>
            </p:layoutUnit>
            
            <p:layoutUnit position="east" size="200">
                    <h:form  enctype="multipart/form-data" id="loginForm">
            <h:panelGrid columns="2" rendered="#{!sessBean.auth}">
                <h:outputText value="Логин"/>
                <h:inputText styleClass="login" value="#{sessBean.log}"/>
                
                <h:outputText value="Пасс"/>
                <h:inputText styleClass="login" value="#{sessBean.pass}" />
                
                <br/>
                <p:commandButton actionListener="#{sessBean.logon()}" update=":form :loginForm :growl" value="Залогиниться" style="width: 120px; font-size: 12px"/>
            </h:panelGrid>
            <h:panelGrid rendered="#{sessBean.auth}">
                <h:outputText value="Вы зашли как [#{sessBean.currNick}]"/>
            </h:panelGrid>
            
        </h:form>
            </p:layoutUnit>
            
            <p:layoutUnit position="center" >
                <h:form  enctype="multipart/form-data" id="breadForm">
                    <p:breadCrumb >
                    <p:menuitem value="Home" update=":form"/>
                    <p:menuitem value="#{msg.rating}" update=":form"/>
                    <p:menuitem value="#{msg.database}" update=":form" action="index"/>
                    <p:menuitem value="#{msg.ongoings}" actionListener="#{mBean.ongoingShow()}" update=":form" action="index"/>
                    <p:menuitem value="#{msg.animeAdd}" action="animeAdd"/>
                </p:breadCrumb>
                </h:form>
                    <ui:insert name="content">Content</ui:insert>
            </p:layoutUnit>
            
            <p:layoutUnit position="south" size="50"> 
                <div class="footform" />
            </p:layoutUnit>
        </p:layout>
        
    </h:body>

</html>
